<template>
	<view class="content">
		<input class="uni-input" focus type='number' v-model="password" placeholder="请输入口令" />
		<button type="default" @click="clickBtn">确定</button>
		<view class="box">
			<view class="box_item" :class="item.id===flag?'active':''"  v-for="(item,index) in data" :key='item.id' @click="item.id==0?start():''">
				{{item.name}}
			</view>
		</view>
		<view class="cont" style="text-align: center;">
			次数: {{lotteryNumber}}
		</view>
	</view>
</template>

<script>
	import {getRandomNum_AB,GL} from '../../utils/index.js'
	export default {
		data() {
			return {
				data:[
					{id:1,name:''},
					{id:2,name:''},
					{id:3,name:''},
					{id:8,name:''},
					{id:4,name:''},
					{id:7,name:''},
					{id:6,name:''},
					{id:5,name:''}],
				flag:0, //中奖的编号
				time:0, //旋转的值 
				isStart:false, //是否开始
				lotteryNumber:5, //抽奖次数
				password:'', 
				passwordInfo:0
			}
		},
		onLoad() {
			this.data.splice(4,0,{id:0,name:'开始'})
			let arr = ['一等奖','谢谢参与','二等奖','谢谢参与','三等奖','谢谢参与','四等奖','谢谢参与']
			arr.forEach((item,index)=>{
					this.data.forEach(item1=>{
						if(item1.id===index+1){
							return item1.name=item
						}
					})
			})
			console.log(this.data);
			

			this.passwordInfo = uni.getStorageSync('passwordInfo') || 56756
			
			
			
			
		},
		methods: {
			start(){
				if(this.isStart) return
				if(this.lotteryNumber<=0) {
					uni.showToast({
						title: '请充值',
						icon:'none',
						duration: 2000
					});
					return
				}
				this.lotteryNumber--
				this.isStart=true
				// let flag = getRandomNum_AB(1,8)
				// 中奖概率构造函数
				let gl = new GL({
				    min: 1,
				    max: 9,
				    fenpei: new Map([
				        [1, 0.25],
				        [3, 0.25],
				        [5, 0.25],
				        [7, 0.25],
				    ])
				});
				let flag =gl.random() //生成随机数
				this.time = 4900+(50*flag)
				// console.log(this.time);	
				this.flag=1
				this.fn(100)
			},
			clickBtn(){
				let date= new Date()
				let HH = date.getHours()<10?"0"+date.getHours():date.getHours()
				let mm = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes()
				console.log(HH+''+mm);
				if(this.password == HH+''+mm){
					uni.showToast({
						title: '恭喜你,获得3次抽奖机会',
						icon:'none',
						duration: 2000
					});
					// const val = this.passwordInfo + 1234
					// this.passwordInfo=val
					// uni.setStorageSync('passwordInfo', val);
					this.lotteryNumber += 3
				}else{
					uni.showToast({
						title: '无效的口令,请重试',
						icon:'none',
						duration: 2000
					});	
				}
				this.password=''
			},
			fn(){
				let time = this.time
				let n = 50
				let Timeout=()=>{
					setTimeout(()=>{
						time = time-n
						if(time<=4000&&time>3000){
							n = 100 
						}else if(time<=3000&&time>2500){
							n = 500
						}else if(time<=2500&&time>2000){
							n = 800 
						}else if(time<=2000){
							n = 1000 
						}
						if(time<=0){
							if(this.flag%2){
								let title =''
								switch (this.flag){
									case 1:
										title='100元'
										break;
									case 3:
										title='50元'
										break;
									case 5:
										title='30元'
										break;
									default:
										title='5元'
										break;
								}
								uni.showToast({
									title: `恭喜您获得给作者${title}的机会`,
									icon:'none',
									duration: 2000
								});	
							}else{
								uni.showToast({
									title: '很遗憾没有中奖',
									icon:'none',
									duration: 2000
								});	
							}
							this.isStart=false
							return false
						}
						if(this.flag<8){
							this.flag++
						}else{
							this.flag=1
						}
						Timeout()
					},n)
				} 
				Timeout()

			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.box{
			width: 700rpx;
			height: 700rpx;
			margin: 50rpx auto;
			background-color: #007AFF;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			.box_item{
				width: 33%;
				height: 33%;
				background-color: #DD524D;
				display: flex;
				align-items: center;
				justify-content: center;
				&:nth-child(5){
					color: #fff;
					background-color: #F0AD4E;
				}
			}
			.active{
				background-color: rgba(0,0,0,.5);
			}
		}
	}

</style>
